.checkbox-btn {
    width: 28px;
    height: 28px;
    position: absolute;
    top: 11px;
    right: 50px;
    border-radius: 50px;
    box-shadow: inset 0 1px 1px white, 0 1px 3px rgba(0, 0, 0, 0.5);
    background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
}

.checkbox-btn label {
    cursor: pointer;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 4px;
    top: 4px;
    border-radius: 50px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 0 white;
    background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
}

.checkbox-btn label:after {
    opacity: 0;
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50px;
    background: #00bf00;
    box-shadow: inset 0 1px 1px #81dc81, 0 1px 3px rgb(10, 161, 10);
}

.checkbox-btn label:hover::after {
    opacity: 0.3;
}

.checkbox-btn input[type=checkbox] {
    visibility: hidden;
}

.checkbox-btn input[type=checkbox]:checked + label:after {
    opacity: 1;
}

.console p {
    margin-left: 5px;
}

.checkbox-btn-close {
    right: 10px;
}

.checkbox-btn-close label:after {
    background: #e52100;
    box-shadow: inset 0 1px 1px #f16969, 0 1px 3px rgb(175, 29, 4);
}
